<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>线路品类管理</title>
<%@include file="../../header.jsp" %>
<script type="text/javascript" src="/js/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css" type="text/css">
<SCRIPT type="text/javascript">

		var IDMark_A = "_a";

		function addDiyDom(treeId, treeNode) {
			//console.info(treeId);
			//console.info(treeNode);
			if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
			var aObj = $("#" + treeNode.tId + IDMark_A);
			//var json = JSON.stringify(treeNode);
			var nodeId = treeNode.id;
			var editStr = "<span class='demoIcon' id='" +treeNode.id+ "' title='"+treeNode.name+"'>"
			+"<span class='button icon-add' onclick='addCat(\""+nodeId+"\")'></span>";
			if(nodeId!=0) {
				editStr += "<span class='button icon-edit' onclick='editCat(\""+nodeId+"\")'></span>"
				+"<span class='button icon-del' onclick='delCat(\""+nodeId+"\")'></span>";
			}
			editStr += "</span>";
			aObj.append(editStr);
		}

		$(function(){
			var zNodes = ${trees};
			initTree(zNodes);
		});
		
		function addCat(id) {
			clearForm();
			$("#category-form").find("input[name='dicDictionaryId']").val(id);
		}
		
		function editCat(id) {
			$("#edit-div").load("/line/category/load.htm?id="+id);
		}
		
		function delCat(id) {
			$.ajax({
				url:"/line/category/del.htm?id="+id,
				dataType:"json"
			}).done(function(data) {
				alert(data.msg);
				if(data.isSuccess) {
					initTree(data.json);
					clearForm();
				}
			})
		}
		
		function saveCat() {
			$.ajax({
				url:"/line/category/save.htm",
				type:"post",
				data:$("#category-form").serialize(),
				dataType:"json"
			}).done(function(data) {
				alert(data.msg);
				if(data.isSuccess) {
					initTree(data.json);
					clearForm();
				}
			})
		}
		
		function initTree(zNodes) {
			$.fn.zTree.init($("#treeDemo"), 
				{
					view: {
						addDiyDom: addDiyDom
					}, 
					data:{
						simpleData:{
							enable:true
						}
					}
				}, zNodes);
		}
		
		function clearForm() {
			$("#category-form").find("input[type='text']").val("");
			$("#category-form").find("input[type='radio']").removeAttr("checked");
			$("#category-form").find("textarea").val("");
			$("#category-form").find("input[name='dictionaryId']").val(0);
		}
	</SCRIPT>
	<style type="text/css">
		.ztree li span.demoIcon{padding:0 2px 0 10px;}
		.ztree li span.button.icon-add{margin:0; background: url(../../../../images/exticons/icon/add.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
		.ztree li span.button.icon-edit{margin:0; background: url(../../../../images/exticons/icon/pencil.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
		.ztree li span.button.icon-del{margin:0; background: url(../../../../images/exticons/icon/delete.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
		.ztree li a.curSelectedNode{text-decoration:none; }
	</style>
</head>
<body>
<div class="ch-container">
	<div class="row">
    <div class="box col-md-3">
        <div class="box-inner">
            <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-tasks"></i> 线路品类树</h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default"><i
                            class="glyphicon glyphicon-cog"></i></a>
                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>
                    <a href="#" class="btn btn-close btn-round btn-default"><i
                            class="glyphicon glyphicon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
            	<input type="text">&nbsp;<a href="javascript:;" class="btn btn-default">查询</a>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
    <!--/span-->

    <div class="box col-md-9">
        <div class="box-inner">
            <div class="box-header well">
                <h2><i class="glyphicon glyphicon-eye-open"></i> 线路品类编辑</h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default"><i
                            class="glyphicon glyphicon-cog"></i></a>
                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>
                    <a href="#" class="btn btn-close btn-round btn-default"><i
                            class="glyphicon glyphicon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
            	<div id="edit-div">
                <jsp:include page="form.jsp"/>
                </div>
            </div>
        </div>
    </div>
    <!--/span-->

</div><!--/row-->
</div>
</body>
</html>